import { FileTextOutlined, SettingOutlined } from "@ant-design/icons";
import { Tabs, TabsProps } from "antd";
import ComponentProp from "./ComponentProp";
import { FC, useEffect, useState } from "react";
import useGetComponentInfo from "@/hooks/useGetComponentInfo";
import PageInfo from "./PageInfo";

//枚举
enum TAB_KEYS {
  PROP_KEY = "prop",
  SETTING_KEY = "setting",
}

const RightPanel: FC = () => {
  const [activeKey, setActiveKey] = useState(TAB_KEYS.PROP_KEY);
  const { selectId } = useGetComponentInfo();

  useEffect(() => {
    if (selectId) {
      setActiveKey(TAB_KEYS.PROP_KEY);
    } else {
      setActiveKey(TAB_KEYS.SETTING_KEY);
    }
  }, [selectId]);

  // 添加处理 tab 切换的函数
  const handleTabChange = (key: string) => {
    setActiveKey(key as TAB_KEYS);
  };

  const items: TabsProps["items"] = [
    {
      key: TAB_KEYS.PROP_KEY,
      label: (
        <span className="flex items-center gap-1">
          <FileTextOutlined />
          属性
        </span>
      ),
      children: <ComponentProp />,
    },
    {
      key: TAB_KEYS.SETTING_KEY,
      label: (
        <span className="flex items-center gap-1">
          <SettingOutlined />
          页面设置
        </span>
      ),
      children: <PageInfo />,
    },
  ];
  return (
    <div>
      <Tabs items={items} activeKey={activeKey} onChange={handleTabChange} />
    </div>
  );
};

export default RightPanel;
